.color_test {
    color: red;
}

/*
    变量
        $符号开头
        先定义 再使用
        border_color 等价于 border-color , 重复定义会覆盖
*/

// css变量
:root {
    --color: '#00a';
}
body {
    --border-color: #f2f2f2;
}
.header {
    --background-color: #f8f8f8;
}
p {
    color: var(--color);
}

// scss变量
$color: '#c00';
$border-color: #f2f2f2;
$border-width: 1px;
.container {
    $font-size: 12px;
    color: $color;
}
.footer {
    // font-size: $font-size; // $font-size为局部变量,无法使用
}
